<template>
	<div>
		<!-- 顶部标签 区域 -->
		<van-nav-bar title="首页" fixed />
		<div style="height: 45px;"></div>
		<!-- 搜索 区域 -->
		<van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
			<template #action>
				<div @click="onClickButton">搜索</div>
			</template>
		</van-search>
		<van-tabs v-model:active="active">
			<van-tab title="娱乐">
				<!-- 轮播图 区域(组件传参) -->
				<swiper :images="images"></swiper>
				<!-- 秒杀 区域 -->
				<div v-show="status" class="time">
					<h2>秒杀倒计时</h2>
					<p>距离结束还有<span>{{ time }}秒</span></p>
				</div>
				<!-- grid宫格 区域 -->
				<van-grid :column-num="4">
					<van-grid-item v-for="item in catitemsdata" :key="item.name" :icon="item.image_src" :text="item.name" />
				</van-grid>
				<!-- 楼层 区域 -->
				<div v-for="item in floordata" :key="item.floor_title">
					<img :src="item.floor_title.image_src" :alt="item.floor_title.name" style="width: 100%;">
					<div v-for="i in item.product_list" :key="i.name">
						<img :src="i.image_src" :alt="i.name" style="width: 100px; height: 100px;float: left; margin: 3px;">
					</div>
				</div>
			</van-tab>
			<van-tab title="军事">
				<!-- 需要展示瀑布流的效果 -->
				<div class="waterfall">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</van-tab>
			<van-tab title="游戏">内容 3</van-tab>
			<van-tab title="新闻">内容 4</van-tab>
		</van-tabs>
	</div>
</template>
<script setup>
import { ref } from 'vue'
import swiper from '@/components/swiper.vue'
import { catitemsApi, floordataApi } from '@/api/api'
import router from '@/router'
// 轮播图(组件传参)
const images = [
	'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
	'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
	'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
]
// 获取导航API 实现渲染
let catitemsdata = ref([])
catitemsApi().then(res => {
	console.log('导航数据', res)
	catitemsdata.value = res.data.message
})
// 获取楼层API 实现渲染
let floordata = ref([])
floordataApi().then(res => {
	console.log('楼层数据', res);
	floordata.value = res.data.message
})
// 页面跳转 跳转到搜索页
const onSearch = () => {
	router.push('/search')
}
const onClickButton = () => {
	router.push('/search')
}
// 秒杀倒计时
// 状态 控制元素的显示与隐藏
let status = ref(true)
let time = ref(10)
let t1 = setInterval(() => {
	time.value--
	if (time.value == 0) {
		clearTimeout(t1)
		status.value = false
	}
}, 1000)
</script>
<style lang="scss" scoped>
.time {
	width: 100%;
	height: 80px;
	margin-left: 5px;
	color: red;
}

.waterfall {
	width: 100%;
	height: 100%;
	column-count: 3;

	div {
		width: 100px;
		height: 100px;
		float: left;
		background-color: yellowgreen;
		margin: 5px;
	}
}
</style>